<template>
  <div class="lottery">
    <h1>This is an lottery page</h1>
    <input class="lottery_start" @click="lotteryStart" type="button" value="开始抽奖">
    <input class="lottery_start" type="button" @click="lotteryStop" value="停止">
    <div class="lucky_show">
    <span>{{prize.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
    data(){
    return{
      shishenList:'',
      prize:''
    }
  },
    mounted(){
    this.$axios({
      method:'get',
      url:'/get_heroid_list?rarity=0&page=1&per_page=200&_=1588777336923'
    }).then(res=>{
      this.shishenList = res.data.data
      console.log(this.shishenList)
    })
  },
  methods:{
    lotteryStop(){
      clearInterval(start)
    },
    lotteryStart(){
      let total = Object.keys(this.shishenList)
      let lucky = Math.round(Math.random()*total.length)
      let start = setInterval(()=>{
        this.prize = Object.values(this.shishenList)[lucky]
      },1)
    }
  }
}
</script>

<style lang="scss">
  .lottery{
    .lottery_start{
      background-color:cadetblue;
      width: 80px;
      height: 40px;
      color:blueviolet;
      font-size: 14px; 
    }
  }
</style>